<script setup>
import { ref } from 'vue';
import slide1 from '@/assets/images/slide1.png';
import slide2 from '@/assets/images/slide2.png';
import slide3 from '@/assets/images/slide3.png';
import DoughnutChart from '@/components/doughnutchart.vue';
// 走马灯内容
const carouselItems = ref([
  {
    image: slide1,
    alt: '幻灯片1'
  },
  {
    image: slide2,
    alt: '幻灯片2'
  },
  {
    image: slide3,
    alt: '幻灯片3'
  }
]);

</script>

<template>
  <div class="home">
    <el-carousel style="height: 300px;" autoplay>
      <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
        <img :src="item.image" :alt="item.alt" class="carousel-image" />
      </el-carousel-item>
    </el-carousel>
    <DoughnutChart />
    
  </div>
</template>

<style scoped>
.home {
  padding: 20px;
  background-color: #f9f9f9;
}

.carousel-image {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.carousel-image {
  width: 100%;
  height: 100%; /* 改为 100% 以填充容器 */
  object-fit: cover; /* 保持比例并填充容器 */
  border-radius: 10px;
}
</style>
